<template>
    <div>
        <el-card class="box-card"  @keyup.enter.native="submit('logForm')">
            <!--  @keyup.enter="submit('logForm')"绑定键盘事件enter键触发登录 -->
            <div slot="header" class="clearfix">
                <span>{{ $t("main['log.login']") }}</span>
            </div>
            <el-form label-position="right" status-icon :label-width="logCardLabelWidth" :model="logform" :rules="rules"
                ref="logForm">
                <el-form-item :label="$t('log.account')" prop="account">
                    <el-input v-model="logform.account" :placeholder="$t('log.placeholder')" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('log.password')" prop="password">
                    <el-input v-model="logform.password" :placeholder="$t('log.placeholder')" type="password" clearable
                        show-password></el-input>
                </el-form-item>
            </el-form>
            <div class="foot">
                <el-row>
                    <el-button plain @click="cancle">{{ $t('log.cancle') }}</el-button>
                    <el-button type="primary" plain @click="submit('logForm')"  class="submit-btn-red">{{ $t('log.submit')
                    }}</el-button>
                </el-row>
            </div>
            admin<br>
            000000
        </el-card>
    </div>
</template>
<script>
import { post } from '@/api/serves'
export default {
    name: 'logCard',
    components: {},
    data() {
        return {
            logform: {
                account: this.$store.state.account,
                password: this.$store.state.password
            },
            rules: {
                account: [
                    { required: true, message: this.$t('log.placeholder'), trigger: 'blur' },
                ],
                password: [
                    { required: true, message: this.$t('log.placeholder'), trigger: 'blur' }
                ],
            }
        }
    },
    // 计算属性
    computed: {
        logCardLabelWidth() {
            let lawidth = this.$i18n.locale === 'zn' ? '80px' : '160px'
            return lawidth
        }
    },
    // 监控data中数据变化
    watch: {},
    // 方法合集
    methods: {
        submit(formname) {
            // 登录
            this.$refs[formname].validate(async (valid) => {
                if (valid) {
                    const res = await this.login()
                    console.log(res, 'res');
                    if(res?.data?.code===200){
                        // 清空
                        this.$refs[formname].resetFields()
                        // 存储信息到本地以及vuex
                        this.setInfo(res?.data?.data)
                        console.log(this.$store.state,'访问本地vuex');
                        // 进行页面跳转
                        this.$router.push('/')
                    }
                    // 拿到用户信息了，进行存储信息，校验等动作，才可以进行页面跳转
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        setInfo(payload){
            console.log(payload,'payload');
            this.$store.commit('SETTOKEN',{...payload})
            localStorage.setItem('userInfo',JSON.stringify({...payload}))
        },
        cancle() {
            // 取消登录
        },
        async login() {
            // 登录
            const params = this.transformForm()
            // 有token拿token 没token 置空
            params.token = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')).token:''
            const res = await post('logByAccount', params)
            if (!res?.data?.data && res) {
                this.$message({
                    message: res?.data?.message,
                    type: 'warning'
                })
                return
            }
            if (res?.data?.code === 200) {
                this.$message({
                    message: '登录成功',
                    type: 'success'
                })
                return res
            } else {
                this.$message({
                    message: '网络错误',
                    type: 'warning'
                })
                return
            }
        },
        transformForm() {
            // 转换页面取值为入参
            /*
            * 本来应该做一些转换操作的 为了简便这里就略过了 只是一个开发思路
            */
            return this.logform
        },
        
    },
    // 生命周期 - 创建完成（可以访问当前this 实例）
    created() {  },
    // 生命周期 - DOM树挂载完成（可以访问DOM元素）
    mounted() { },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeUnmount() { }, //生命周期 - 销毁之前
    unmounted() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.text {
    font-size: 14px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
    position: fixed;
    left: calc(50% - 300px);
    top: calc(50%);
    transform: translate(50%, -50%);

    .foot {
        display: flex;
        justify-content: flex-end;
    }
}
</style>